<template>
  <div class="cont">
    <div class="dia">
      <div class="header">
        <div class="title">临时登录</div>
        <div class="close" @click="emit('close')"></div>
      </div>
      <div class="content">
        <el-form :model="state.fm" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off"
          @finish="onFinish">
          <el-form-item label="账号">
            <el-input v-model="state.fm.account" />
          </el-form-item>

          <el-form-item label="密码">
            <el-input-password v-model="state.fm.passwd" />
          </el-form-item>

          <el-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <el-button type="primary" html-type="submit">Submit</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  oneData: Object
});
const emit = defineEmits(["close"]);
const state = reactive({
  show: true,
  fm: {}
})
const onFinish = (values) => {
  
  useApi.post("/api/sysmanage/login", state.fm).then((res) => {
    // console.log('login res:',res)
    if (res.errorCode === '001002'){
      console.log('用户名或密码错误');
      return
    }
    if (res.errorCode === '001003'){
      console.log('用户状态异常');
      return
    }
    let user = res.data;
    let store = useMyStore();
    store.user = user
    console.log('Success:', user);
    emit('close')
  });
};
</script>

<style lang="scss" scoped>
.cont {
  width: 300px;
}

.dia {
  margin-top: 5px;
  width: 300px;
  height: 238px;
  display: flex;
  flex-direction: column;

  .header {
    width: 300px;
    height: 38px;
    background-image: url('/images/bg03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;

    .title {
      margin-left: 30px;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
    }

    .close {
      margin: 8px 2px 0 auto;
      width: 30px;
      height: 30px;
      cursor: pointer;
      opacity: 0.5;
    }
  }

  .content {
    width: 300px;
    height: 200px;
    background-image: url('/images/bg04.png'), url('/images/bbg.png');
    background-size: 100% 13%, 100% 100%;
    background-position-y: 103%, 0;
    background-repeat: no-repeat;
    padding: 10px 10px 12px 10px;

    .list {
      width: 100%;
      height: 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background-image: url('/images/mb1.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .item {
        width: 100%;
        height: 80px;
        margin: 6px 0;
        padding: 0 18px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font-weight: 600;
        font-size: 14px;
        color: #FFFFFF;

        .inft {
          height: 30px;
          display: flex;
          align-items: center;
          font-weight: 600;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 20px;
        }

        .infc {
          height: 24px;
          display: flex;
          align-items: center;
          font-weight: 600;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 17px;
        }

        .line {
          margin-top: 10px;
          margin-left: -15px;
          width: 256px;
          height: 2px;
          background-image: url('/images/line.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>